import React from 'react';
import { Collapse } from 'antd';
import CollapseHead from '../CollapseHead';
import styles from './index.less';

const { Panel } = Collapse;

const CustomCollapse = ({ defaultActiveKeys = [], dataSource = [], headColor, children, ...rest }) => {
    const [activeKeys, setActiveKeys] = React.useState(defaultActiveKeys);

    const handleCollapseChange = keys => {
        setActiveKeys(keys);
    };

    return (
        <Collapse
            className={styles.custom}
            bordered={false}
            activeKey={activeKeys}
            onChange={handleCollapseChange}
            {...rest}
        >
            {dataSource.map(item => (
                <Panel
                    header={
                        <CollapseHead title={item.title} expand={activeKeys.includes(item.key)} color={headColor} />
                    }
                    key={item.key}
                    showArrow={false}
                    extra={item.extra}
                >
                    {item.value}
                </Panel>
            ))}
        </Collapse>
    );
};

export default CustomCollapse;
